<template>
  <div class="net-content">
    <div class="net-title df aic jcsb">
      <div class="df aic">
        <h4>实时联网设备</h4>
      </div>
    </div>
    <div class="net-line df aic">
      <div class="line-box df">
        <div class="line-equipment">
          <div class="line-text df fdc aic jcc" @click="line">
            <div style="color: #65d67f; font-size: 14px">在线设备</div>
            <div style="color: #b3efcf; font-size: 18px">21</div>
          </div>
        </div>
        <div class="water">
          <dv-water-level-pond :config="config" style="width: 80px; height: 80px" />
        </div>
        <div class="unline-equipment">
          <div class="line-text df fdc aic jcc">
            <div style="color: #5b778d; font-size: 14px">离线设备</div>
            <div style="color: #adc5d6; font-size: 18px">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="warnning df jcsb">
      <div class="warn-box warn-box1 df aic jcsb">
        <div class="warn-text">火警</div>
        <div class="warn-num" style="color: #df3224">35</div>
      </div>
      <div class="warn-box warn-box2 df aic jcsb">
        <div class="warn-text">故障</div>
        <div class="warn-num" style="color: #ed9537">35</div>
      </div>
      <div class="warn-box warn-box3 df aic jcsb">
        <div class="warn-text">监管</div>
        <div class="warn-num" style="color: #ebc745">35</div>
      </div>
      <div class="warn-box warn-box4 df aic jcsb">
        <div class="warn-text">联网单位</div>
        <div class="warn-num" style="color: #57baee">35</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [55],
        shape: 'round',
        waveNum: 1,
        waveHeight: 10,
        waveOpacity: 0.7,
        colors: ['#90e9ec']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.net-content {
  width: 100%;
  height: 95%;
  border: 1px solid #90e9ec;
  .water {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -100%);
  }
  .net-title {
    height: 30px;
    margin: 0 10px;
    color: #fff;
    font-size: 10px;
  }
  .net-line {
    width: 100%;
    margin-left: 10%;
  }
  .line-box {
    position: relative;
    width: 80%;
    // margin-left: 10%;
  }
  .line-equipment {
    width: 40%;
    height: 70px;
    margin-right: 5%;
    background: linear-gradient(to right, #214b33, #0a1c27);
  }
  .unline-equipment {
    width: 40%;
    height: 70px;
    margin-left: 15%;
    background: linear-gradient(to left, #283e53, #0c1a2b);
  }
  .line-text {
    height: 100%;
  }
  .warnning {
    width: 80%;
    height: 90px;
    margin-left: 10%;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .warn-box {
    width: 48%;
    height: 40px;
    padding: 0 20px 0 10px;
    background-color: #90e9ec;
  }
  .warn-box1 {
    background-color: #3a0d11;
  }
  .warn-box2 {
    background-color: #3e2e16;
  }
  .warn-box3 {
    background-color: #413913;
  }
  .warn-box4 {
    background-color: #143748;
  }
  .warn-text {
    font-size: 14px;
  }
  .warn-num {
    font-size: 18px;
    font-weight: bolder;
  }
}
</style>
